<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page language= "java" contentType="text/html;charset=UTF-8"%> 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>支出科目管理</title>
        <link type="text/css" href="css/redmond/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />
        <link type="text/css" href="css/screen.css" rel="Stylesheet" />
        <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery.validate.min.js"></script>
        <script type="text/javascript" src="js/jquery.form.js"></script>
        
        
        <script type="text/javascript">
        
            //创建该分类的时候调用
            function setButtonEvent(id, parentId) {
                //小分类的按钮事件
                if (parentId) {
                    $( "#delete-subitem-" + id )
                    .button()
                    .click(function(){
                    	$.getJSON("jsonDeleteCostType.action","costType.id=" + id,function(data){
                    		$("#subitem-" + parentId + "-" + id).remove();
                        	});
                        
                    });
                //大分类的按钮事件
                } else {
                    $( "#delete-item-" + id )
                    .button()
                    .click(function(){
                    	$.getJSON("jsonDeleteCostType.action","costType.id=" + id,function(data){
                    	    $("tr[id^=subitem-" + id + "]").remove();
                    	    $("#item-" + id).remove();
                    	});
                    });

	            

                    $( "#create-subitem-" + id )
                    .button()
                    .click(function(evt) {
                        $("input#costType-pid").val(id);
                        $( "#dialog-form" ).dialog( "open" );
                    });                   
                }
            }
        
        
            //创建大类
	        function createItemRow(id, name) {
	            return "<tr id='item-" + id + "'>"
	                     + "<td>" + id + "</td>"
	                     + "<td>" + name + "</td>"
	                     + "<td/>"
	                     + "<td>"
	                     +     "<button id='create-subitem-" + id + "' class='create-subitem'>创建小类</button>"
	                     +     "<button id='delete-item-" + id + "' class='delete-item'>删除大类</button>"
	                     + "</td>"                    
	                   + "</tr>";
	         }

	        //创建小类
            function createSubitemRow(id, name, parentId) {
               return "<tr id='subitem-" + parentId + "-" + id + "'>"
                         + "<td>" + id + "</td>"                  
                         + "<td>&nbsp;&nbsp;|-</td>"
                         + "<td>" + name + "</td>"
                         + "<td>"
                         +     "<button id='delete-subitem-" + id + "' class='delete-subitem'>删除小类</button>"
                         + "</td>"
                       + "</tr>";
             }

	        $().ready(function(){ 
	              $( "#dialog-form" ).dialog({
	                  autoOpen: false,
	                  height: 300,
	                  width: 350,
	                  modal: true,
	                  buttons: {
	                      "创建": function() { 
	                         $("#create-item-form").submit();
	                         
	                      },
	                      "关闭": function() {
	                          resetCreateItemForm();
	                          $( this ).dialog( "close" );
	                      }
	                  },
	                  close: function() {
	                      resetCreateItemForm();
	                  }
	              });
	            
	            
	            $( "#create-item" )
	              .button()
	              .click(function() {
	                  $( "#dialog-form" ).dialog( "open" );
	              });
	           

	              //validation
	              $("#create-item-form input#costType-name")
	                  .attr("class","required")
	                  .attr("minlength", "1"); 
	              $("#create-item-form").validate();
	              //$("#create-item-form").attr("class", "cmxform");

	              $('#create-item-form').ajaxForm({ 
	                    // dataType identifies the expected content type of the server response 
	                    dataType:  'json', 
	             
	                    // success identifies the function to invoke when the server response 
	                    // has been received 
	                    success:   processJson 
	                }); 
	              
	          });

	          function processJson(data) {
	                // 'data' is the json object returned from the server
	                //创建一个小类
	                if(data.parentId) {
		                $(createSubitemRow(data.id, data.name, data.parentId)).insertAfter($("#item-" + data.parentId));
                        setButtonEvent( data.id, data.parentId);
	                } else {
		                //创建一个大类
	                    $("#item-table-body").prepend($(createItemRow(data.id, data.name)));
                        
                        setButtonEvent(data.id);
	                }            
	          }

	          function resetCreateItemForm() {
	              $("input#costType-pid").val('');
	              $("input#costType-name").val('');
	          }
		         
        </script>
        
    </head>
 
    <body>
        支出科目一览
        <p/>
        <button id="create-item">创建大类</button>
	    <div class="ui-widget">	        
	        <table class="ui-widget ui-widget-content">
	            <thead>
	                <tr class="ui-widget-header ">
	                    <th>id</th><th colspan="2">名称</th><th>操作</th>
	                </tr>
	            </thead>
	            <tbody id="item-table-body">
                <s:if test="costTypes.size > 0">
	                <s:iterator value="costTypes">
	                <script  type="text/javascript">
	                    document.write(createItemRow('<s:property value="id"/>', '<s:property value="name" />')); 
                        setButtonEvent('<s:property value="id"/>');
	                </script>
	                <s:if test="costDetailTypes.size > 0">
	                <s:iterator value="costDetailTypes">
                    <script  type="text/javascript">
                        document.write(createSubitemRow('<s:property value="id"/>', '<s:property value="name" />', '<s:property value="parentId" />')); 
                        setButtonEvent('<s:property value="id"/>', '<s:property value="parentId" />');
                    </script>
	                </s:iterator>
	                </s:if>
	                </s:iterator>
	        </s:if>
            </tbody>
	        </table>

		</div>
		
		<div id="dialog-form" title="创建分类">
            <s:form id="create-item-form" action="jsonCreateCostType">
                <s:textfield id="costType-pid" name="costType.parentId" cssStyle="display:none"/>
                <s:textfield id="costType-name" label="分类名称" name="costType.name" 
                    labelposition="left" />
            </s:form>
        </div>
    </body>
    

    
</html>
